<template>
    <div class="collapse-pare">
        <div class="collapse-content" v-for="item in models">
           <div class="collapse-title" @click="expandOrCollapse(item.id)">
              <i class="el-icon-caret-bottom" v-if="item.isOpen"></i>
               <i v-else class="el-icon-caret-right"></i>
              {{item.title}}

           </div>
           <div class="collapse-child" v-if="item.isOpen" v-for="cItem in item.children" :id="item.id">
                <input type="text" v-model="cItem.content" class="content-ipt" v-if="isinput"/>
                <span v-else>{{cItem.content}}</span>
                <input type="text" v-model="cItem.score" class="score-ipt" v-if="isinput"/>

           </div>
        </div>

    </div>
</template>

<script>
  export default {
    name: 'collapse',

    props: {
        models:{
          type:Array
        },
        isinput:{
            type:Boolean
        }


    },

    data () {
        return {

        }
    },

    methods: {
        expandOrCollapse(id){
          this.models.forEach((item,index)=>{

            if(item.id==id){
              item.isOpen=!item.isOpen;
            }else{
                item.isOpen=false;
            }

          })

        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .collapse-content{
    font-size:14px;
    color:#8492a6;
 }
.collapse-title{
   height:35px;
   line-height:35px;

}
.collapse-child{
  padding-left:10px;
  margin-bottom:10px;
}
.content-ipt,.score-ipt{
  width:200px;
  height:28px;
  line-height:28px;
  border:#efefef 1px solid;
  border-radius:6px;
}
.score-ipt{
  width:30px;
  margin-left:10px;
}
</style>
